﻿@using ApexCharts
@using Blazor.Server.UI.Services
@using CleanArchitecture.Blazor.Application.Features.Logs.DTOs
@using CleanArchitecture.Blazor.Application.Features.Logs.Queries.ChatData
@inject IStringLocalizer<Logs> L
@inherits ComponentBase
<div class="d-flex flex-grow-1 mb-2">
    <MudPaper Class="pa-5 flex-grow-1" Elevation="3" Style="@backgroundColor" >
        <ApexChart @ref="chart" Options="options" TItem="LogTimeLineDto" Height="180"
                  Debug 
                     Title="@L["Collect logs by day"]">
             
            <ApexPointSeries TItem="LogTimeLineDto"
                             Items="Data"
                             Name="Count"
                             XValue="@(e => e.dt.ToString("MMM-d"))"
                             YValue="@(e=>e.total)"
                             YAggregate="@(e => e.Sum(e => e.total))"
                             SeriesType="SeriesType.Bar" />
        </ApexChart>
    </MudPaper>
</div>

@code {
    private ApexChart<LogTimeLineDto>? chart { get; set; }
    private ApexChartOptions<LogTimeLineDto> options { get; set; }=   new();
    [EditorRequired][Parameter] public List<LogTimeLineDto> Data { get; set; } =new();
    [Inject]
    private LayoutService _layoutService { get; set; } = null!;
    public string backgroundColor = "background:#fff";
    protected override void OnInitialized()
    {

        var isdarkmode = _layoutService.IsDarkMode;
        var colors = isdarkmode ? new List<string>() { "#0277BD", "#039BE5" } : new List<string>() { "#1976D2", "#90CAF9" };
        backgroundColor = isdarkmode ? "background:rgb(66, 66, 66)" : "background:#fff";

        options.Theme = new ApexCharts.Theme()
        {
                Mode = (isdarkmode? Mode.Dark:Mode.Light ),
        };

        options.Fill = new Fill
            {
                Type = new List<FillType> { FillType.Gradient },
                Gradient = new FillGradient
                {
                    Type= GradientType.Vertical,
                    ShadeIntensity = 1,
                    OpacityFrom = 1,
                    OpacityTo = 0.7,
                    GradientToColors = colors,
                    Stops = new List<double>() {0,100 }
                },

            };
        options.Yaxis = new List<YAxis>();
        options.Yaxis.Add(new YAxis
            {
                Labels = new YAxisLabels
                {
                    Formatter = @"function (value) {return Number(value).toLocaleString();}"
                }
            }
        );

        options.Xaxis = new XAxis
            {
                Labels = new XAxisLabels
                {
                    Formatter = @"function (value) {
                    if (value === undefined) {return '';}
                    return '';}"
                }
            };

        options.DataLabels = new DataLabels
            {
                Formatter = @"function(value, opts) {
                   return  Number(value).toLocaleString();}"
            };

        options.Tooltip = new ApexCharts.Tooltip
            {
                X = new TooltipX
                {
                    Formatter = @"function(value, opts) {
                    if (value === undefined) {return '';}
                    return  value}"
                }
            };

        _layoutService.MajorUpdateOccured += async (s, e) =>
                {
                    var isdarkmode = _layoutService.IsDarkMode;
                    var colors = isdarkmode ? new List<string>() { "#0277BD", "#039BE5" } : new List<string>() { "#1976D2", "#90CAF9" };
                    backgroundColor = isdarkmode ? "background:rgb(66, 66, 66)" : "background:#fff";
                    options.Theme.Mode = (isdarkmode ? Mode.Dark : Mode.Light);
                    options.Fill.Gradient.GradientToColors = colors;
                    await chart!.UpdateOptionsAsync(true, true, false);
                    await chart!.RenderAsync();
                    StateHasChanged();
                };

    }
    public async Task RenderChart()
    {
        await chart!.UpdateSeriesAsync(true);
        await chart!.RenderAsync();
    }

}
